<template>
<div class="news">
  <carousel></carousel>
  <div class="new" v-loading="loading">
  <ul  class="transition-box" v-if="number">
    <li class="one_new" v-for="yy in number" :key="yy.id">
      <router-link class="one_li" :to="{name:'page',params:{id:yy.id}}">
        <span class="one_class">{{yy.title}}</span>  <span v-show="iphone" class="one_title">{{yy.date }}</span>
      </router-link>
    </li>
  </ul>
    <p><span class="new_page">共{{pages}}页,现在是第{{numb}}页</span></p>
    <el-button-group>
      <el-button icon="el-icon-arrow-left" @click="numb--,over(),openFullScreen()"
                 v-loading.fullscreen.lock="fullscreenLoading" plain round>上一页
      </el-button>

      <el-button @click="numb++,over(),openFullScreen()"
                 v-loading.fullscreen.lock="fullscreenLoading" plain round>下一页<i
        class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
  </div>
</div>
</template>

<script>
  import Carousel from './page/Carousel'
    export default {
        name: "information",
      data(){
        return{
          number:'',
          pages:3,
          numb:1,
          show:true,
          loading: true,
          fullscreenLoading: false,
          iphone:true
        }
      },
      mounted:function () {
        this.over();
        document.title="资讯";
        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
          console.log(111);
          this.iphone=false;
        }else {
          console.log(222);
        }
      },
      methods:{
        over:function () {
          var that = this;
          if((that.numb <= that.pages)&&(that.numb>0)){
          axios.get('https://bird.ioliu.cn/v2/?url=http://101.37.161.89/wordpress/?json=1&page='+that.numb).then(re => {
            that.number = re.data.posts;
            that.pages = re.data.pages;
            that.loading = false;
          })
        }else if(that.numb > that.pages){
            that.numb = that.pages;
          }else if(that.numb<1){
            that.numb = 1;
          }
        }, openFullScreen() {
          this.fullscreenLoading = true;
          setTimeout(() => {
            this.fullscreenLoading = false;
          }, 1200);
        }
      },
      components:{
        Carousel
      }
    }
</script>

<style scoped>
.new{
  max-width: 720px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 200px;
  background:#FFFFFF;
}
  .new > ul,.new >li {
    list-style: none;
  }
  .one_new{
    margin-left: 30px;
    margin-right: 30px;
  }
  .page-bar{
    margin: 20px 30px;
  }
  a{
    text-decoration: none;
  }
.one_li{
  color: #474747;
}
  .one_new{
    margin-top: 50px;
    margin-bottom: 50px;
    /*border: 1px solid #e9e9e9;*/
    /*box-shadow: -4.78px -1.52px 23.8px 4.2px rgba(156,156,156,0.25);*/
  }
.one_new:hover{
  /*border: 1px solid #e9e9e9;*/
  box-shadow: -4.78px -1.52px 23.8px 4.2px rgba(156,156,156,0.25);
}
  .new{
    border: 1px solid #e9e9e9;
    box-shadow: -4.78px -1.52px 23.8px 4.2px rgba(156,156,156,0.25);
  }
  .one_title{
    line-height: 23.3px;
    float: right;
    overflow: hidden;
  }
  .one_class{
    overflow: hidden;
  }
.el-button-group .el-button{
  float: inherit;
}
.el-button-group {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  text-align: center;
  padding-bottom: 30px
}
.new_page{
 width: 100%;
  display: inline-block;
  text-align: center;
}
.el-button-group .el-button:not(:last-child) {
  /*margin-right: 442px;*/
}
  .transition-box{
    padding: 0;
    margin: 0;
  }
</style>
